<!DOCTYPE html>
<html>
  <head>
    <title> Student Map </title>
  </head>
  <body>
    <h1> Student Map</h1>

    <h2>Enter your information</h1>
    <form action="/" method=post>
      Name:<input type="text" name="name">
      Location: <input type="text" name="location">
      <input type="submit">
    </form>

    <img src="https://chart.googleapis.com/chart?cht=map:fixed=-60,-180,80,180&chs=500x500&chco=CCCCCC|FF0000&chld={{locations}}&chm={{labels}}"alt="Map">


    <form action="/" method="post">
       {% for student in students %}
         <div>
          <input type="checkbox" name="student" value="{{student.key}}">
          {{student.name}} : {{student.location}}
         </div>
       {% endfor %}
       <input type="submit" value="Delete">
    </form>

    <div>
       <p> LOCATION: {{locations}} </p>
       <p> LABELS: {{labels}} </p>
    </div>
  
  </body>
</html>
